<template>
  <div class="user-edit">
    <!-- Drawer抽屉 -->
    <Drawer
      :title="title"
      v-model="visible"
      width="720"
      draggable
      :mask-closable="type == '0'"
    >
      <div :style="{ maxHeight: maxHeight }" class="drawer-content">
        <div class="drawer-header">
          <div style="margin-right: 16px">基本信息</div>
          <Avatar :src="form.avatar" size="large" v-show="type != '2'" />
        </div>
        <Form label-colon v-show="type != '2'">
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="用户名/UID">
                {{ form.username }}
                <Tooltip trigger="hover" placement="right" content="账户已禁用">
                  <Icon
                    v-show="form.status == -1"
                    type="md-lock"
                    size="18"
                    style="margin-left: 10px; cursor: pointer"
                  />
                </Tooltip>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="邀请码">{{ form.inviteCode }}</FormItem>
            </Col>
          </Row>
        </Form>
        <Form
          ref="form"
          :model="form"
          :rules="formValidate"
          label-position="top"
        >
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="昵称" prop="nickname">
                <Input v-model="form.nickname" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="手机号" prop="mobile">
                <Input v-model="form.mobile" />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="邮箱" prop="email">
                <Input v-model="form.email" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="性别">
                <Select v-model="form.sex" transfer>
                  <Option value="男">男</Option>
                  <Option value="女">女</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="头像" class="form-noheight">
                <upload-pic-input v-model="form.avatar"></upload-pic-input>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="生日">
                <DatePicker
                  v-model="form.birth"
                  @on-change="changeBirth"
                  style="display: block"
                  type="date"
                  transfer
                ></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="地区">
                <Input v-model="form.address" />
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="定位">
                <Map
                  id="userLocate"
                  v-model="form.position"
                  :readonly="true"
                  :clearable="false"
                  text="查看地图"
                  :preview="true"
                />
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="积分">
                <InputNumber
                  :min="0"
                  v-model="form.grade"
                  style="width: 100%"
                ></InputNumber>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="个人简介">
                <Input v-model="form.description" />
              </FormItem>
            </Col>
          </Row>
          <Divider />
          <p class="drawer-title">VIP信息</p>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="用户类型">
                <Select v-model="form.type" transfer placeholder="请选择">
                  <Option :value="0">普通会员</Option>
                  <Option :value="1">VIP</Option>
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="VIP状态">
                <Select v-model="form.vipStatus" transfer placeholder="请选择">
                  <Option :value="0">未开通</Option>
                  <Option :value="1">已开通</Option>
                  <Option :value="2">已过期</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="VIP开通时间">
                <DatePicker
                  v-model="form.vipStartTime"
                  @on-change="changeVipStartTime"
                  style="display: block"
                  type="datetime"
                  transfer
                ></DatePicker>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="VIP到期时间">
                <DatePicker
                  v-model="form.vipEndTime"
                  @on-change="changeVipEndTime"
                  style="display: block"
                  type="datetime"
                  transfer
                ></DatePicker>
              </FormItem>
            </Col>
          </Row>
          <Divider />
          <p class="drawer-title">其他信息</p>
          <Row :gutter="32">
            <Col span="12">
              <FormItem label="角色权限（可直接输入回车添加）">
                <Select
                  v-model="permissions"
                  multiple
                  filterable
                  allow-create
                  transfer
                  placeholder="请选择或输入添加"
                >
                  <Option
                    v-for="(item, i) in permissionList"
                    :value="item"
                    :key="i"
                    >{{ item }}</Option
                  >
                </Select>
              </FormItem>
            </Col>
            <Col span="12">
              <FormItem label="注册平台">
                <Select v-model="form.platform" transfer placeholder="请选择">
                  <Option :value="0">PC/H5</Option>
                  <Option :value="1">Android</Option>
                  <Option :value="2">IOS</Option>
                  <Option :value="3">微信小程序</Option>
                  <Option :value="4">支付宝小程序</Option>
                  <Option :value="5">QQ小程序</Option>
                  <Option :value="6">字节小程序</Option>
                  <Option :value="7">百度小程序</Option>
                  <Option :value="-1">未知</Option>
                </Select>
              </FormItem>
            </Col>
          </Row>
        </Form>
        <div style="height: 50px"></div>
      </div>
      <div class="drawer-footer br" v-show="type != '0'">
        <Button type="primary" :loading="submitLoading" @click="submit"
          >提交</Button
        >
        <Button @click="visible = false">取消</Button>
      </div>
    </Drawer>
  </div>
</template>

<script>
import { addMember, editMember } from "@/api/app";
import { validateMobile, validatePassword } from "@/libs/validate";
import uploadPicInput from "@/views/my-components/xboot/upload-pic-input";
import SetPassword from "@/views/my-components/xboot/set-password";
import Map from "@/views/my-components/xboot/map";
export default {
  name: "user",
  components: {
    uploadPicInput,
    SetPassword,
    Map,
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Object,
    },
    type: {
      type: String,
      default: "0",
    },
  },
  data() {
    return {
      permissions: [],
      permissionList: [],
      visible: this.value,
      title: "",
      submitLoading: false,
      maxHeight: 510,
      form: {},
      formValidate: {
        // 表单验证规则
        nickname: [
          { required: true, message: "请输入昵称", trigger: "change" },
        ],
        mobile: [
          { required: true, message: "请输入手机号", trigger: "change" },
          { validator: validateMobile, trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
          { validator: validatePassword, trigger: "change" },
        ],
        email: [{ type: "email", message: "邮箱格式不正确" }],
      },
    };
  },
  methods: {
    init() {},
    changeBirth(v, d) {
      this.form.birth = v;
    },
    changeVipStartTime(v, d) {
      this.form.vipStartTime = v;
    },
    changeVipEndTime(v, d) {
      this.form.vipEndTime = v;
    },
    handleCreatev(v) {
      this.permissionList.push({
        v,
      });
    },
    submit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.form.permissions = this.permissions.join(",");
          if (typeof this.form.birth == "object") {
            this.form.birth = this.format(this.form.birth, "yyyy-MM-dd");
          }
          if (typeof this.form.vipStartTime == "object") {
            this.form.vipStartTime = this.format(
              this.form.vipStartTime,
              "yyyy-MM-dd HH:mm:ss"
            );
          }
          if (typeof this.form.vipEndTime == "object") {
            this.form.vipEndTime = this.format(
              this.form.vipEndTime,
              "yyyy-MM-dd HH:mm:ss"
            );
          }
          if (this.type == "1") {
            // 编辑
            this.submitLoading = true;
            editMember(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          } else {
            // 添加
            this.submitLoading = true;
            addMember(this.form).then((res) => {
              this.submitLoading = false;
              if (res.success) {
                this.$Message.success("操作成功");
                this.$emit("on-submit", true);
                this.visible = false;
              }
            });
          }
        }
      });
    },
    setCurrentValue(value) {
      if (value === this.visible) {
        return;
      }
      if (this.type == "1") {
        this.title = "编辑会员";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else if (this.type == "2") {
        this.title = "添加会员";
        this.maxHeight =
          Number(document.documentElement.clientHeight - 121) + "px";
      } else {
        this.title = "会员详情";
        this.maxHeight = "100%";
      }
      // 清空数据
      this.$refs.form.resetFields();
      this.permissions = [];
      this.permissionList = [];
      if (this.type == "0" || this.type == "1") {
        // 回显数据
        let data = this.data;
        // 权限
        if (data.permissions) {
          this.permissions = data.permissions.split(",");
          this.permissionList = data.permissions.split(",");
        }
        // 回显
        this.form = data;
      } else {
        this.permissions = ["MEMBER"];
        this.permissionList = ["MEMBER"];
        // 添加
        this.form = {
          type: 0,
          grade: 0,
          vipStatus: 0,
          platform: -1,
        };
      }
      this.visible = value;
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
    visible(value) {
      this.$emit("input", value);
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="less">
@import "@/styles/drawer-common.less";
</style>

